<template>
  <transition
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
  >
    <slot />
  </transition>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'CollapseTransition',
  setup() {
    const elTransition =
      '0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out'
    const beforeEnter = (el: {
      style: {
        transition: string
        paddingTop: number
        paddingBottom: number
        height: number
      }
      dataset: { oldPaddingTop?: any, oldPaddingBottom?: any }
    }) => {
      el.style.transition = elTransition
      if (!el.dataset) el.dataset = {}

      el.dataset.oldPaddingTop = el.style.paddingTop
      el.dataset.oldPaddingBottom = el.style.paddingBottom

      el.style.height = 0
      el.style.paddingTop = 0
      el.style.paddingBottom = 0
    }

    const enter = (el: {
      dataset: { oldOverflow: any, oldPaddingTop: any, oldPaddingBottom: any }
      style: {
        overflow: string
        height: string
        paddingTop: any
        paddingBottom: any
      }
      scrollHeight: string | number
    }) => {
      el.dataset.oldOverflow = el.style.overflow
      if (el.scrollHeight !== 0) {
        el.style.height = el.scrollHeight + 'px'
        el.style.paddingTop = el.dataset.oldPaddingTop
        el.style.paddingBottom = el.dataset.oldPaddingBottom
      } else {
        el.style.height = ''
        el.style.paddingTop = el.dataset.oldPaddingTop
        el.style.paddingBottom = el.dataset.oldPaddingBottom
      }

      el.style.overflow = 'hidden'
    }

    const afterEnter = (el: {
      style: { transition: string, height: string, overflow: any }
      dataset: { oldOverflow: any }
    }) => {
      el.style.transition = ''
      el.style.height = ''
      el.style.overflow = el.dataset.oldOverflow
    }

    const beforeLeave = (el: {
      dataset: {
        oldPaddingTop?: any
        oldPaddingBottom?: any
        oldOverflow?: any
      }
      style: {
        paddingTop: any
        paddingBottom: any
        overflow: string
        height: string
      }
      scrollHeight: string
    }) => {
      if (!el.dataset) el.dataset = {}
      el.dataset.oldPaddingTop = el.style.paddingTop
      el.dataset.oldPaddingBottom = el.style.paddingBottom
      el.dataset.oldOverflow = el.style.overflow

      el.style.height = el.scrollHeight + 'px'
      el.style.overflow = 'hidden'
    }

    const leave = (el: {
      scrollHeight: number
      style: {
        transition: string
        height: number
        paddingTop: number
        paddingBottom: number
      }
    }) => {
      if (el.scrollHeight !== 0) {
        el.style.transition = elTransition
        el.style.height = 0
        el.style.paddingTop = 0
        el.style.paddingBottom = 0
      }
    }

    const afterLeave = (el: {
      style: {
        transition: string
        height: string
        overflow: any
        paddingTop: any
        paddingBottom: any
      }
      dataset: { oldOverflow: any, oldPaddingTop: any, oldPaddingBottom: any }
    }) => {
      el.style.transition = ''
      el.style.height = ''
      el.style.overflow = el.dataset.oldOverflow
      el.style.paddingTop = el.dataset.oldPaddingTop
      el.style.paddingBottom = el.dataset.oldPaddingBottom
    }

    return {
      beforeEnter,
      enter,
      afterEnter,
      beforeLeave,
      leave,
      afterLeave
    }
  }
})
</script>
